
<template>
    <div>
      <div ref="h5pContainer" style="width: 100%; height: 600px;"></div> <!-- H5P 渲染容器 -->
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import { H5P } from 'h5p-standalone'; // 引入 H5P 库
import { ElMessage, ElMessageBox } from 'element-plus'
  
  // 定义 H5P 容器引用
  const h5pContainer = ref<any>(null);
  
  onMounted(() => {
    // 确保容器存在
    if (!h5pContainer.value) return;
  
    // H5P 配置参数
    const options = {
      h5pJsonPath: '/src/assets/others/h5p2', // 指向解压后的 h5p.json 所在目录
      frameJs: '/node_modules/h5p-standalone/dist/frame.bundle.js', // H5P 框架 JS（可根据实际路径调整）
      frameCss: '/node_modules/h5p-standalone/dist/styles/h5p.css', // H5P 框架 CSS（可根据实际路径调整）
      // 可选：其他配置项（如调试模式、语言等）
      // debug: true,
      // lang: 'zh-CN'
    };
  
    try {
      // 初始化 H5P
      new H5P(h5pContainer.value, options);
    } catch (error) {
      console.error('H5P 初始化失败:', error);
      // 示例：错误提示（需根据 Element Plus 调整）
      ElMessage.error('H5P 内容加载失败，请检查路径或文件完整性');
    }
  });
  </script>
  
  <style>
  /* 可选：调整 H5P 容器样式 */
  #h5p-container {
    border: 1px solid #e5e7eb;
    margin-top: 1rem;
  }
  </style>